<template>
  <div class="main">
    <div class="det_top_box">
      <div class="detail_header">
        <div class="det_top">
          <div>使用部门：{{form.UseOrgName}}</div>
          <div>
            <img
              class="dep_top_img"
              src="@/assets/Images/AppIcon/icon_qr_code.png"
              alt=""
              @click="goQRCode"
            />
            <!--跳转拍照-->
            <!--<img class="dep_top_img" src="@/assets/Images/AppIcon/icon_camera.png" alt="">-->
          </div>
        </div>
        <eagle-row class="det_name">{{ form.ChemName }}</eagle-row>
        <eagle-row class="det_location"></eagle-row>
        <eagle-row class="mb-10"> </eagle-row>
        <eagle-row class="mb-10">
          <eagle-col span="12">
            <span>修改人</span>
            <span> {{ form.EditChnName }}</span>
          </eagle-col>
          <eagle-col span="12">
            <span>修改时间</span>
            <span> {{ form.EditDate }}</span>
          </eagle-col>
        </eagle-row>
      </div>
    </div>
    <div class="det_tab">
      <div class="det_tab_item">
        <eagle-tag
          type="primary"
          size="large"
          mark
        >基本信息</eagle-tag>
        <eagle-cell-group :border="border">
          <eagle-cell
            title="使用量(kg,T,L/年)"
            :value="form.UseNum||'无'"
          />
          <eagle-cell
            title="供应商"
            :value="form.Supplier||'无'"
          />
          <eagle-cell
            title="联系电话"
            :value="form.SupolierTel||'无'"
          />
          <eagle-cell
            title="化学品管理员"
            :value="form.ChemManagerChnName"
          />
          <eagle-cell
            title="使用部门"
            :value="form.UseOrgName"
          />
          <!-- <eagle-cell
            title="使用地点"
            :value="form.UsePlace"
          />
          <eagle-cell
            title="最大存储量"
            :value="form.Storage"
          />
          <eagle-cell
            title="存放地点"
            :value="form.Location"
          />
          <eagle-cell
            title="物料号"
            :value="form.ItemNo"
          /> -->
          <eagle-cell
            title="是否属于危化品"
            :value="form.IsDanger?'是':'否'"
          />
          <eagle-cell
            title="其他属性"
            :value="form.ChemistryPropName"
          />
          <eagle-cell
            title="自定义属性"
            v-if="whetherOrNotShownOtherProp"
            :value="form.OtherProp"
          > </eagle-cell>
          <eagle-cell
            title="化学品危害特性"
            v-model="form.ChemicalHazardCharacteristics"
          > </eagle-cell>
          <eagle-cell
            title="急救措施"
            v-model="form.FirstAidMeasures"
          > </eagle-cell>
          <eagle-cell
            title="主要用途"
            :value="form.Purpose"
          />
          <eagle-cell
            title="备注"
            :value="form.Remarks"
          />
        </eagle-cell-group>
      </div>
      <div class="det_tab_item">
        <eagle-tag
          class="mb-10"
          type="primary"
          size="large"
          mark
        >成分</eagle-tag>
        <div class="operate_det">
          <div class="operate_list">
            <eagle-row class="operate_row_first">
              <eagle-col span="3">序号</eagle-col>
              <eagle-col
                offset="1"
                span="10"
              >主要成分</eagle-col>
              <eagle-col
                offset="1"
                span="8"
              >CAS No</eagle-col>
            </eagle-row>
            <eagle-row
              v-for="(item, index) in form.Details"
              :key="index"
              class="operate_row"
            >
              <eagle-col span="3">1</eagle-col>
              <eagle-col
                offset="1"
                span="10"
              >{{item.Component}}</eagle-col>
              <eagle-col
                offset="1"
                span="8"
              >{{item.CASNo}}</eagle-col>
            </eagle-row>
            <!-- <van-row class="operate_row">
              <van-col span="4">1</van-col>
              <van-col offset="1" span="10">记得扣就防毒</van-col>
              <van-col offset="1" span="8">维保记录</van-col>
            </van-row> -->
          </div>
        </div>
      </div>
      <div class="det_tab_item">
        <van-tag
          type="primary"
          size="large"
          mark
        >附件资料</van-tag>
        <div class="operate_det">
          <div class="operate_list">
            <eagle-row class="operate_row_first">
              <eagle-col span="3">序号</eagle-col>
              <eagle-col
                offset="1"
                span="10"
              >名称</eagle-col>
              <eagle-col
                offset="1"
                span="8"
              >文件类型</eagle-col>
            </eagle-row>
            <eagle-row
              v-for="(item, index) in form.Details2"
              :key="index"
              class="operate_row"
            >
              <eagle-col span="3">{{ index+1 }}</eagle-col>
              <eagle-col
                offset="1"
                span="10"
                style="color:rgb(25, 137, 250)"
                @click="play(item)"
              >{{item.ResName}}</eagle-col>
              <eagle-col
                offset="1"
                span="8"
              >{{item.EquFileTypeName}}</eagle-col>
            </eagle-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDate } from "@/utils/getDate";
export default {
  components: {},
  data() {
    return {
      ChemCode: this.$route.query.ChemCode,
      border: false,
      active: "a",
      ChemistryProp2: [],
      whetherOrNotShownOtherProp: false,
      form: {},
      tabList: [
        { title: "人员信息", name: "a" },
        { title: "风险告知信息", name: "b" },
        { title: "操作规程", name: "c" },
        { title: "应急处置卡", name: "d" },
        { title: "隐患排查", name: "e" },
        { title: "设备信息", name: "f" },
        { title: "化学品信息", name: "g" },
        { title: "事故记录", name: "h" },
      ],
    };
  },
  filters: {
    formatDate: function (value, args) {
      var dt = new Date(value);
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      if (args.toLowerCase() === "yyy-mm-dd") {
        return `${y}-${m}-${d}`;
      } else {
        var hh = dt.getHours();
        var mm = dt.getMinutes();
        var ss = dt.getSeconds();
        return `${y}-${m}-${d}:${hh}:${mm}:${ss}`;
      }
    },
  },
  created() {
    this.geDetail();
  },
  methods: {
    // 获取详情
    geDetail() {
      var _this = this;
      _this.$axios
        .get("/ChemChemistry/GetDetailChemistryEntity", {
          params: { ChemCode: this.ChemCode },
        })
        .then((res) => {
          _this.form = res.data;
          this.form.EditDate = getDate(res.data.EditDate);
          if (res.data.ChemistryProp) {
            _this.ChemistryProp2 = res.data.ChemistryProp.split(",");
            _this.ChemistryProp2.find(function (value, index, arr) {
              if (value == "5") {
                _this.whetherOrNotShownOtherProp = true;
              }
            });
          }
        });
    },
    play(item1) {
      this.$router.push({
        path: "/Train/WareDetail",
        query: { id: item1.ResID },
      });
    },
    // 二维码
    goQRCode() {
      this.$router.push("/Chemical/QRCode?value=" + this.form.ChemName);
    },
    // 员工信息
    goStaffInfo() {
      this.$router.push("/Site_RiskUnit/StaffInfo");
    },
    // 检查记录
    goInspectRecord() {
      this.$router.push("/Site_RiskUnit/InspectRecord");
    },
  },
};
</script>

<style lang="less">
/*
        .main {
            height: 100vh;
        }
    */

.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_chemistry_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;

    .dep_top_img {
      height: 20px;
      width: 20px;
      margin-right: 5px;
    }
  }

  .det_name {
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-bottom: 20px;
  }
}

.det_tab {
  padding: 10px;
  .det_tab_item {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}
.text_box {
  padding: 10px;
  border-radius: 5px;
  /*background-color: #e8f1f8;*/
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      font-size: 14px;
      /*margin-bottom: 10px;*/
    }
  }
}
.van-cell__value {
  position: relative;
  overflow: hidden;
  color: #222222;
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
}
.van-tag--primary {
  background-color: #537ee4;
}
</style>
